<!--
	访问统计
	Created by Penglei on 2023/08/08
-->
<template>
	<div class="visits">
		<!-- 统计量 -->
		<div class="visits-count-box">
			<VisitsCount title="累计访问次数" :num="totalVisits"></VisitsCount>
			<VisitsCount title="今日访问次数" :num="todayVisits"></VisitsCount>
		</div>
	</div>
</template>

<script setup name="AccessStatistics">
// 访问次数组件
import VisitsCount from '@/components/VisitsCount';
// 引入接口
import { getAccessStatisticsApi } from '@/api/vulnerability'

// 今日访问量
let todayVisits = ref(0);
// 累计访问量
let totalVisits = ref(0);

// 加载数据
const getData = () => {
	getAccessStatisticsApi().then(res => {
		const { code, data } = res;
		if (code == 200 && data) {
			const { visitsTodayNumTimes, visitsAccrueNumTimes } = data;
			// 今日访问量
			todayVisits.value = visitsTodayNumTimes || 0;
			// 累计访问量
			totalVisits.value = visitsAccrueNumTimes || 0;
		}
	}).catch(err => {
		console.log(err.message);
	})
}
// 挂载完成
onMounted(() => {
	// 加载数据
	getData();
})
</script>

<style lang="scss" scoped>
.visits {
	padding: 20px;

	// 统计量
	.visits-count-box {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.visits-count {
			margin-bottom: 20px;
			width: 187px;
		}
	}
}
</style>